<template>
<div>
    <el-dialog :title="'编辑'" :close-on-click-modal="false" :visible.sync="visible"
               @close="clearDataList()" width="800px"  append-to-body>

    <el-container>
      <el-main style="max-height:60vh">
        <el-form :model="dataFormNew"  ref="dataFormNew" @keyup.enter.native="dataFormSubmit()" label-width="140px">
          <el-row>
            <el-form-item label="人员名称" prop="userName" >
              {{dataFormNew.userName}}
              <!--<el-input v-model="dataFormNew.userName" placeholder="人员名称" style="width: 90%"></el-input>-->
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="人员类型" prop="">
              <el-radio-group v-model="dataFormNew.userLx" @change="radioChange">
                <el-radio :label="'个人'">个人</el-radio>
                <el-radio :label="'班子'">班子</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>
          <el-row v-if="showDeptName">
            <el-form-item label="人员班子" prop="userDeptId">
              <avue-input-tree v-model="dataFormNew.userDeptId" :node-click="getNodeData" :dic="treeDeptData" :props="defaultProps" placeholder="请选择所属部门" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="排序" prop="bhzPx" :rules="[
                 { required: true, message: '等次分值不能为空', trigger: 'blur' },
                 {pattern: /^([1-9]\d{0,3}|10000)$/, message: '范围在1-10000', trigger: 'blur'}]">
              <el-input-number v-model="dataFormNew.bhzPx"  style="width: 170px ;margin-right:10px"></el-input-number>
            </el-form-item>
          </el-row>
        </el-form>
      </el-main>
    </el-container>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit">确定</el-button>
      <el-button type="primary" plain @click="visible = false">取消</el-button>
     
    </span>
  </el-dialog>
</div>
</template>

<script>
import {getObj, addObj, selHzBmList,savelist,putObj,delObj } from '@/api/ceping/cepinghzgldxpzb'
import { fetchTree } from '@/api/admin/dept'
import { deptRoleList } from '@/api/admin/role'
export default {
  data(){
    return{
      defaultProps: {
        label: 'name',
        value: 'id'
      },
      treeDeptData: [],
      hzId : '',
      visible : false,
      canSubmit: false,
      deptName:'',
      showDeptName: false,
      dataFormNew:{
        hzId:'',
        userId:'',
        userName:'',
        userLx:'',
        userDeptId:undefined,
        userDeptName:undefined,
        bhzPx:''
      },
    }
  },
  mounted() {
    // 查询部门树
    fetchTree().then(response => {
      this.treeDeptData = response.data.data
      ////console.log(this.treeDeptData)
    })

  },
  methods: {
    getNodeData(vm){
      this.deptName = '';
      this.deptName = vm.name;
      //console.log(this.deptName);
    },
    radioChange(vm){
      if(vm === '班子'){
        this.showDeptName = true;
      }else {
        this.showDeptName = false;
      }
    },
    init(id) {
      ////console.log(id);
      this.canSubmit = true;
      this.hzId = id;
      this.getDataList();
    },
    getDataList() {
      getObj(this.hzId).then(response => {
        if(!response.data.data.userDeptId){
          response.data.data.userDeptId = undefined
        }
        this.dataFormNew = response.data.data;
        if(this.dataFormNew.userLx === '班子'){
          this.showDeptName = true;
        }
        this.visible = true;
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataFormNew'].validate((valid) => {
        if (valid) {
          this.canSubmit = false;

          if(this.dataFormNew.userLx === "班子" && this.deptName !== '' ){
            this.dataFormNew.userDeptName = this.deptName;
          }

          putObj(this.dataFormNew).then(data => {
            this.$notify.closeAll();
            this.$notify.success('修改成功');
            this.visible = false;
            this.$emit('refreshDataList');
          }).catch(() => {
            this.canSubmit = true;
          });

        }
      })
    }
    ,
    clearDataList(){
      this.dataFormNew ={};
      this.showDeptName = false;
      this.deptName = '';
    }
  }
}
</script>

<style scoped>

</style>
